<template>
  <PageContainer>
    <a-card :bordered="false" title="随手记">
      <template v-if="editable" #extra>
        <a-space size="middle">
          <a-typography-text type="secondary">【编辑】和【添加】随手记内容后别忘记点【保存】哦！！！</a-typography-text>
          <a-button type="primary" @click="add">添加</a-button>
          <a-button type="primary" danger :disabled="saveDisabled" @click="save">保存</a-button>
        </a-space>
      </template>
      <a-timeline mode="alternate">
        <template v-for="(note, index) in noteList" :key="index">
          <a-timeline-item>
            <a-typography-paragraph
              v-model:content="note.description"
              :editable="editable ? { triggerType: ['icon', 'text'] } : false"
            />
          </a-timeline-item>
        </template>
      </a-timeline>
    </a-card>
  </PageContainer>
</template>

<script lang="ts" setup>
import * as noteApi from '@/api/note/note';
import { PageContainer as PageContainer } from '@ant-design-vue/pro-layout';
import { message } from 'ant-design-vue';
import { useStoreGlobalStore } from '@/store';
//权限判断
const editable = useStoreGlobalStore().state.loginUser.role > 0;

const noteList = ref<object[]>([]);

onBeforeMount(() => {
  getNoteList();
});

function getNoteList() {
  noteApi.noteList().then(jsonResult => {
    noteList.value = jsonResult?.result;
  });
}

function add() {
  noteList.value.splice(0, 0, { description: '请输入随手记内容！' });
}

let saveDisabled = ref(false);
function save() {
  saveDisabled.value = true;
  noteApi.noteSave(noteList.value).then(jsonResult => {
    saveDisabled.value = false;
    if (!jsonResult) {
      return;
    }
    getNoteList();
    message.success('保存成功！');
  });
}
</script>
